#6114 Improved my keys section #6121
Conversation
sosnovsky
left a comment
sosnovsky
left a comment
There was a problem hiding this comment.
let's make it more compact, like the previous version - in the current design only 2 keys are visible without scrolling, while previous layout showed 5 keys on the screen. it should be possible to fit full key information into a single line
old:
new:
|
Sounds good. Fixed and pushed |
|
sosnovsky
left a comment
sosnovsky
left a comment
There was a problem hiding this comment.
looks much better now 👍
sosnovsky
left a comment
sosnovsky
left a comment
There was a problem hiding this comment.
almost there, just a couple improvements :)
| // 3. Build HTML | ||
| // Header row | ||
| html += ` | ||
| <div class="row key-list-header" style="font-weight: 600; padding: 10px 0; border-bottom: 2px solid #eee;"> |
There was a problem hiding this comment.
let's use padding: 5px 0; like it was in the previous version, as with 10px padding rows become too high as before.
also what about moving all these newly added styles to css instead of putting them inline into html?
| const rowClass = isExpired ? 'key-content-row expired' : 'key-content-row'; | ||
| const opacityStyle = isExpired ? 'opacity: 0.7;' : ''; | ||
|
|
||
| html += `<div class="row ${rowClass}" style="padding: 10px 0; border-bottom: 1px solid #e6e6e6; align-items: center; ${opacityStyle}">`; |
There was a problem hiding this comment.
I noticed that the last row is cut off at the bottom and can't be scrolled, probably because of overflow with bottom bar, need to add some additional margin below keys table to fix it:
This PR improved my keys section
close #6114 // if this PR closes an issue
Tests (delete all except exactly one):
To be filled by reviewers
I have reviewed that this PR... (tick whichever items you personally focused on during this review):